<template>
	<div class="padding-container preview-wrap">
    <div class="title-part">
    </div>
    <el-form class="edit-form" :rules="rules" label-width="100px">
      <el-form-item :label="$root.lang.control.device.operation.operateType" prop="operateType">
        <el-select v-model="operateType" @change="changeOperateType">
          <el-option :label="item.title" :value="item.value" :key="item.value" v-for="item in setType.operateType"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$root.lang.control.device.operation.configure"  v-if="setShow">
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="setType.operateType[3].setType.startNow.name"></el-checkbox>
          <el-checkbox :label="setType.operateType[3].setType.autoStart.name"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <el-tabs type="border-card" v-show="appShow">
      <el-tab-pane :label="$root.lang.control.task.create.appSelect">
        <App @receiveApp="getReceiveApp" />
      </el-tab-pane>
    </el-tabs>
    <div class="chose-btn">
      <el-button @click="onSubmit()" :loading=loading type="primary">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
	</div>
</template>

<script>
import App from './components/app'
import '@/options/taskState';
export default {
	name: 'DeviceOperation',
  components:{
    App
  },
	data() {
		return {
      setType: {},
      setShow: false,
      appShow: false,
      loading: false,
      operateType: 1,
      appId: '',
      checkList: [],
      ids: null,
      rules: {
        operateType: [{ required: true, message: this.$root.lang.control.device.operation.rule.operateType, trigger: 'blur' }],
      },
		}
	},
  watch:{
  },
  computed: {
  },
  methods: {
    checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.setType = enSetType
      } else {
        this.setType = setType
      }
    },
    getReceiveApp(data) {
      this.appId = data.value
    },
    cancel() {
      this.$router.go(-1)
    },
    onSubmit() {
      let deviceIds = this.ids.split(',')
      // 检查连接状态
      if(this.operateType == 1) {
        this.checkConnect(deviceIds)
      } else if(this.operateType == 7) {
        // 重启设备
        this.restartDevice(deviceIds)
      } else if(this.operateType == 2 || this.operateType == 3 || this.operateType == 4|| this.operateType == 5 || this.operateType == 6) {
        // 更新应用记录、安装应用、运行应用、停止应用、卸载应用
        let param = {}
        let devices = []
        deviceIds.forEach((item) => {
          let device = {
            deviceId: item
          }
          devices.push(device)
        }) 
        param.device = devices
        if(this.operateType == 2) {
          this.refreshApps(param)
        } else {
          if(this.appId == '') {
            this.$message({
              message: this.$root.lang.control.device.operation.needAppTip,
              type: 'error',
              duration: 3 * 1000
            })
            return
          }
          param.operate = this.operateType - 2
          param.appId = this.appId
          // 安装应用
          if(this.operateType == 3) {
            param.startNow = 0
            param.autoStart = 0
            if(this.checkList.length > 0){
              this.checkList.forEach((item) => {
                if(item == this.setType.operateType[3].setType.startNow.name){
                  param.startNow = 1
                }else if(item == this.setType.operateType[3].setType.autoStart.name){
                  param.autoStart = 1
                }
              })
            }
          }
          this.operateApp(param)
        }
      } 
    },
    changeOperateType() {
      if(this.operateType == 3) {
        this.appShow = true
        this.setShow = true
      } else if(this.operateType == 4 || this.operateType == 5 || this.operateType == 6) {
        this.appShow = true
        this.setShow = false
      } else {
        this.appShow = false
        this.setShow = false
      }
    },
    operateApp(param) {
      this.loading = true
      this.request({
        url: '/application/issue',
        method: 'post',
        data: this.$root.optionProcess(param)
      }).then(response => {
        this.loading = false
        this.$message({
          message: this.$root.lang.control.device.operation.operationTip,
          type: 'success',
          duration: 3 * 1000
        })
        this.$router.go(-1)
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    restartDevice(deviceIds) {
      this.loading = true
      this.request({
        url: '/device/restart',
        method: 'post',
        data: deviceIds
      }).then(response => {
        this.loading = false
        this.$message({
          message: this.$root.lang.control.device.operation.operationTip,
          type: 'success',
          duration: 3 * 1000
        })
        this.$router.go(-1)
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    checkConnect(deviceIds) {
      this.loading = true
      this.request({
        url: '/device/check/connection',
        method: 'post',
        data: deviceIds
      }).then(response => {
        this.loading = false
        this.$message({
          message: this.$root.lang.control.device.operation.operationTip,
          type: 'success',
          duration: 3 * 1000
        })
        this.$router.go(-1)
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    refreshApps(param) {
      this.loading = true
      this.request({
        url: '/application/issue/update/app',
        method: 'post',
        data: param
      }).then(response => {
        this.loading = false
        this.$message({
          message: this.$root.lang.control.device.operation.operationTip,
          type: 'success',
          duration: 3 * 1000
        })
        this.$router.go(-1)
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    checkState() {
      if(this.baseData.isActivation != 3) {
        this.$message({
          message: this.$root.lang.control.device.detail.notActiveTip,
          type: 'error',
          duration: 3 * 1000
        })
        return false
      } else if(this.baseData.isConnection != 1) {
        this.$message({
          message: this.$root.lang.control.device.detail.notConnectTip,
          type: 'error',
          duration: 3 * 1000
        })
        return false
      } else if(this.baseData.isBinding != 3) {
        this.$message({
          message: this.$root.lang.control.device.detail.notBindTip,
          type: 'error',
          duration: 3 * 1000
        })
        return false
      } else {
        return true
      }
    },
  },
  created() {
    this.ids = this.$route.params.ids
    this.checkLang();
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
    .title-part {
      text-align: left;
      font-size:18px;
      padding-bottom: 30px;
    }
    .edit-form {
      width: 700px;
      textarea {
        width: 88%;
        height: 120px;
        resize: none ;
      }
    }
    .el-textarea__inner {
      resize: none !important;
    }
    .el-radio {
      display: block;
      margin:12px 0 0 0;
    }
    .el-input {
      display: inline-block;
      height: 47px;
      width: 88%;
    }
    .chose-btn {
      margin-top:20px;
    }
	}
</style>